/* isquirreltabs.js
 * 
 * Description: Tab and TabContainer classes.
 * 
 * iSquirrel
 * 2009
 * Imperial College London
 */

var Tab = Class.create({
	
	initialize: function(title, addedstyle){
	
		this._pagebase = null;
		this._page = title; 
		this._isSelected = false;
		this._me = null;
		this._basestyle = {border: "none", 
						   textAlign: "center",
						   cssFloat: "left",
						   display: "inline", 
						   width: "100px", 
						   padding: "4px", 
						   height: "17px", 
						   position: "relative", 
						   top: "0px"};

		if (addedstyle){
			this.style = addedstyle;
		}
		else{
			this.style = {};
		}
		
	},
	
	deselect: function(){
		
		this._isSelected = false;
		this._me.setStyle(this._basestyle);
		return this;
		
	},
	
	select: function(){
		
		this._isSelected = true;
		var selected = { 
		 		backgroundColor: "white", 
		 		borderTop: "1px solid #ddd",
			 	borderRight: "1px solid #ddd",
			 	borderLeft: "1px solid #ddd"
		 		};
		this._me.setStyle(selected);
		return this;
		
	},
	
	isSelected: function(){
	
		return this._isSelected;
		
	},

	draw: function(elem){
		
		for (var s in this.style){
			if (this.style.hasOwnProperty(s)){
				this._basestyle[s] = this.style[s];
			}
		}
		
		var li = new Element("li").setStyle(this._basestyle).update(this._page);
		this._me = li;
		elem.insert({bottom: li});
		
	},
	
	me: function(){
		
		return this._me;
	
	},
	
	basestyle: function(){
		
		return this._basestyle;
		
	},
	
	setBase: function(base){
		
		this._pagebase = base;
		
	},
	
	loadPage: function(){
		
		$("basecontainer").setStyle({opacity: 0.4});
		$("spinner").show();
		
		var requrl = this._pagebase + "servlet/Profiler";
		var page = this._page.replace(/\s+/g,"");
		
		new Ajax.Updater('basecontainer', requrl , {
			method: "post",
			parameters: {p: page, type:0},
			evalScripts: true,
			onSuccess: function(){
				$('spinner').hide();
				$("basecontainer").setStyle({opacity: 1});
			},
			onFailure: function(){
				$("basecontainer").update("<div style='text-align: center'><img src='/<%=request.getRequestURI().split("/")[1]%>/images/Warning_64.png' /><p style='font-size:1.6em; color: #bbb'>Page not found.</p></div>");
			}
		});
		
	},
	
	getPage_noSpaces: function(){
	
		return this._page.replace(/\s+/g,"").toLowerCase();
		
	}
	

});


var TabsContainer = Class.create({
	
	initialize: function(tabarray, elem, pagebase){
		
		this._pagebase = pagebase;
		this._tabs = tabarray;
		this._elem = elem;
	
	},
	
	drawContainer: function(forceloadpage){
		var ul = new Element("ul").setStyle({listStyleType: "none", margin:"0", padding:"0"});
		this._elem.insert({bottom: ul});
		
		var pagetitles = []; // used for force loading
		
		var t_l = this._tabs.length;
		for (var i = 0; i < t_l; ++i){
			this._tabs[i].setBase(this._pagebase);
			this._tabs[i].draw(ul);
			this._tabs[i].me().writeAttribute({id: i});
			this.addListeners(this._tabs,i);
			pagetitles[this._tabs[i].getPage_noSpaces()] = this._tabs[i];  
		}
		
		if (forceloadpage){	
			pagetitles[forceloadpage].select().loadPage();			
		}
		else{		
			this._tabs[0].select().loadPage();
		}
		
	},
	
	addListeners: function(tabs,index){
	
		var li = tabs[index].me();
		var tab = tabs[index];
		
		Event.observe(li, "mouseover", function(e){
			
			if (!tab.isSelected()){
				li.setStyle({backgroundColor: "#838383", color: "white", cursor: "pointer"});
			}

		}.bind(tab));
		
		Event.observe(li, "mouseout", function(e){
			
			if (!tab.isSelected()){
				li.setStyle(tab.basestyle());
			}
		}.bind(tab));
		
		
		Event.observe(li, "click", function(e){
			
			var t_l = tabs.length;
			for (var i = 0; i < t_l; ++i){
				var t = tabs[i];
				t.deselect();
			}
			var ei = parseFloat(Event.findElement(e).id);
			var tei = tabs[ei];
			tei.select().loadPage();
	
		}.bind(tabs));
		
	}
});